<template>
  <el-dialog v-model="visible" width="1500px" :close-on-click-modal="false">
    <el-row :gutter="20">
      <!-- 筛选栏 -->
      <el-col :span="18">
        <ContentWrap style="height: 98%">
          <div class="header"><h3>驱动管理</h3></div>
          <DevicedriverList />
        </ContentWrap>
      </el-col>
      <!-- 表格数据 -->
      <el-col :span="6">
        <ContentWrap>
          <div class="header"><h3>网关概况</h3></div>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="SN编号">{{ gateway.sn }}</el-descriptions-item>
            <el-descriptions-item label="设备模板">
              <el-link type="primary">{{ gateway.template }}</el-link>
            </el-descriptions-item>
            <el-descriptions-item label="型号标识">{{ gateway.model }}</el-descriptions-item>
            <el-descriptions-item label="固件版本">{{ gateway.firmware }}</el-descriptions-item>
            <el-descriptions-item label="联网方式">
              <el-link type="primary">{{ gateway.networkType }}</el-link>
            </el-descriptions-item>
            <el-descriptions-item label="网关状态">
              <el-tag type="success">{{ gateway.status }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="远程上下线">{{ gateway.remote }}</el-descriptions-item>
            <el-descriptions-item label="条件">{{ gateway.condition }}</el-descriptions-item>
          </el-descriptions>
          <div style="margin-top: 16px">
            <el-button type="primary" size="small">网关信息查询</el-button>
            <el-button type="primary" size="small">联网信息查询</el-button>
          </div>
        </ContentWrap>
      </el-col>
    </el-row>

    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import DevicedriverList from '@/views/mqtt/devicedriver/index.vue'
const props = defineProps<{ visible: boolean; row?: any }>()
const emit = defineEmits(['update:visible'])
const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})
const gateway = computed(() => ({
  sn: props.row?.gatewayId || '300124051414',
  template: props.row?.template || '模板模板',
  model: props.row?.model || 'EG10',
  firmware: props.row?.firmwareVersion || 'v2.2.22',
  networkType: props.row?.networkType || '以太网',
  status: props.row?.state || '在线',
  remote: props.row?.remote || '关闭',
  condition: props.row?.condition || ''
}))
onBeforeUpdate(() => {
  console.log('props.row', props.row)
})

</script>

<style scoped>
.header {
  height: 35px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgb(241, 237, 233);
  text-align: left;
  text-indent: 1em;
  line-height: 35px;
}
</style>
